<template>
  <div class="detail-container">
    <el-table :data="dataList" border fit highlight-current-row style="width: 100%">
      <el-table-column align="center" label="序号" width="80">
        <template slot-scope="scope">
          <span>{{ scope.$index + 1 + 1 * (listQuery.current - 1) * listQuery.size }}</span>
        </template>
      </el-table-column>

      <el-table-column width="120px" align="center" label="人员名称">
        <template slot-scope="scope">
          <span>{{ scope.row.userName }}</span>
        </template>
      </el-table-column>
      <el-table-column width="120px" align="center" label="人脸">
        <template slot-scope="scope">
          <div class="box-center">
            <el-avatar shape="square" :size="60" fit="cover" :src="scope.row.imageData ? `data:image/png;base64,${scope.row.imageData}` : null">
              <img src="@/assets/error.png">
            </el-avatar>
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="同步时间">
        <template slot-scope="scope">
          {{ new Date(scope.row.syncTime) | parseTime("{y}-{m}-{d} {h}:{i}") }}
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.current"
      :limit.sync="listQuery.size"
      :auto-scroll="false"
    />
  </div>
</template>

<script>
// import { queryDeviceUser } from '@/api/device'
import Pagination from '@/components/Pagination'

export default {
  name: 'ReportList',
  components: {
    Pagination
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        1: 'success',
        2: 'danger'
      }
      return statusMap[status]
    }
  },
  props: {
    // deviceId: {
    //   type: [Number, String],
    //   default: ''
    // },
    data: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      list: [],
      listLoading: false,
      listQuery: {
        current: 1,
        size: 10
      }
    }
  },
  computed: {
    dataList() {
      return this.data.slice((this.listQuery.current - 1) * this.listQuery.size, this.listQuery.current * this.listQuery.size)
    },
    total() {
      return this.data.length
    }
  },
  // watch: {
  //   deviceId: {
  //     handler: (val) => {
  //       if (val) {
  //         this.getList()
  //       }
  //     },
  //     immediate: true
  //   }
  // },
  created() {
    // if (this.deviceId) {
    //   this.getList()
    // }
  },
  methods: {
    // getList() {
    //   if (this.listLoading) return
    //   this.listLoading = true
    //   queryDeviceUser({ deviceId: this.deviceId })
    //     .then((response) => {
    //       this.list = response.object || []
    //       this.total = this.list.length
    //       this.listLoading = false
    //     })
    //     .catch((err) => {
    //       console.log(err)
    //     })
    // }
  }
}
</script>

<style scoped>
.edit-input {
  padding-right: 100px;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
.box-center {
  display: flex;
  justify-content: center;
}
</style>
